<template>
  <el-dialog
    :title="id ? 'Edit' : 'Insert'"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="onClose"
  >
    <el-form
      ref="formEle"
      label-width="140px"
      :model="ruleForm"
      :rules="ruleFormRules"
      :validate-on-rule-change="false"
      @submit.prevent="handleSubmit"
    >
      <el-form-item label="Name" prop="menu_name">
        <el-input v-model="ruleForm.menu_name"></el-input>
      </el-form-item>
      <el-form-item label="Unique Auth" prop="unique_auth">
        <el-input v-model="ruleForm.unique_auth"></el-input>
      </el-form-item>
      <el-form-item label="Parent Menu">
        <el-cascader
          style="width: 100%"
          v-model="ruleForm.pid"
          :options="ruleList"
          :props="{ label: 'menu_name', value: 'id', checkStrictly: true, emitPath: false }"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="Type" prop="auth_type">
        <el-radio-group v-model="ruleForm.auth_type">
          <el-radio :label="1">菜单</el-radio>
          <el-radio :label="2">接口</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-show="ruleForm.auth_type === 1">
        <el-form-item label="Route" prop="menu_path">
          <el-input v-model="ruleForm.menu_path"></el-input>
        </el-form-item>
        <el-form-item label="Icon" prop="icon">
          <el-select v-model="ruleForm.icon">
            <el-option
              v-for="item in iconList"
              :key="item.name"
              :value="item.name"
              :label="item.name"
            >
              <el-icon :size="16">
                <component :is="item" />
              </el-icon>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Visibility" prop="is_show_path">
          <el-switch v-model="ruleForm.is_show_path" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
      </div>
      <div v-show="ruleForm.auth_type === 2">
        <el-form-item label="Request URL" prop="api_url">
          <el-input v-model="ruleForm.api_url"></el-input>
        </el-form-item>
        <el-form-item label="Request Method" prop="methods">
          <el-radio-group v-model="ruleForm.methods">
            <el-radio v-for="m in requestMethods" :label="m"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Request Params" prop="params">
          <el-input v-model="ruleForm.params"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="Index" prop="sort">
        <el-input-number v-model="ruleForm.sort"></el-input-number>
      </el-form-item>
      <el-form-item label="Status" prop="is_show">
        <el-switch v-model="ruleForm.is_show" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item>
        <button type="submit" hidden></button>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">Submit</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { getRuleInfo, submitRule } from '@/api/rule'
import { computed, ref, nextTick, watch } from 'vue'
import { Aim, Apple, AlarmClock } from '@element-plus/icons'

interface PropsType {
  ruleList: RuleType[]
  id: number | null
  parentId: number | null
}

const props = defineProps<PropsType>()

watch(
  () => props.id,
  (val) => {
    val && getRuleInfo(val).then((res) => {
      ruleForm.value = res
    })
  }
)

watch(
  () => props.parentId,
  (val) => {
    ruleForm.value.pid = val
  }
)

const requestMethods = ['GET', 'POST', 'PUT', 'DELETE']
const iconList = [Aim, Apple, AlarmClock]

const ruleForm = ref<RuleType>({
  menu_name: '',
  auth_type: 1,
  icon: '', // 菜单
  is_show: 0, // 菜单
  menu_path: '', // 菜单
  api_url: '', // 接口
  methods: '', // 接口
  params: '', // 接口
  is_show_path: 0,
  path: '',
  pid: null,
  sort: null,
  unique_auth: '',
})

const ruleFormRules = computed(() => ({
  menu_name: [
    { required: true, message: 'Please input the menu/api name', }
  ],
  menu_path: [
    { required: ruleForm.value.auth_type === 1, message: 'Please input the menu path', }
  ],
  api_url: [
    { required: ruleForm.value.auth_type === 2, message: 'Please input the Request URL', }
  ]
}))

const formEle = ref(null)
const emits = defineEmits(['update:modelValue', 'submit', 'update:id', 'update:parentId'])

function handleSubmit() {
  const form = formEle.value as any

  form.validate((valid: boolean) => {
    if (valid) {

      submitRule(ruleForm.value, props.id).then(() => {
        onClose()
        emits('submit')
      })
    }
  })

}

function onClose() {
  const form = formEle.value as any
  form.resetFields()
  nextTick(() => {
    form.resetFields()
    emits('update:modelValue', false)
    emits('update:id', null)
    emits('update:parentId', null)
  })
}
</script>